import React, { Component, useEffect, useRef } from 'react';
import { Modal, Form, Input } from 'antd'
import { phoneExp } from '@src/utils/Regexp.js'
import _ from 'lodash'

function EditModal(props) {
  const [form] = Form.useForm()
  const formRef = useRef(null)
  const handleOk = () => {
    onFinish()
  }
  const handleCancel = () => {
    console.log(false);
    props.setOpen(false)
  }
  const onFinish = async () => {
    await form.validateFields()
    props.editSubmit(form.getFieldValue())
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  useEffect(() => {
    if (formRef.current) {
      let formData = _.cloneDeep(props.initialValues)
      form.setFieldsValue(formData)
    }
  }, [props.open])
  return (
    <Modal
      title="新增简历"
      open={props.open}
      onOk={handleOk}
      confirmLoading={props.confirmLoading}
      onCancel={handleCancel}
    >
      <Form
        form={form}
        ref={formRef}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 10 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="手机号"
          name="phone"
          rules={[
            { required: true, message: '请输入手机号！' },
            { pattern: phoneExp, message: '请输入正确手机号！' }
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="用户名"
          name="userName"
          rules={[{ required: true, message: '请输入用户名！' }]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default EditModal;